import React, { Component } from 'react'
import Search from './components/Search'
import List from './components/List'

/**
 * github搜索案例相关知识点
 * 1、设计状态时要考虑全面，例如带有网络请求的组件，要考虑请求失败怎么办
 * 2、ES6小知识点：解构赋值+重命名
 *    let obj = {a: {b:1}}
 *    const {a} = obj // 解构赋值 
 *    const {a:{b}} = obj // 连续解构赋值
 *    const {a:b:value} = obj // 连续解构赋值+重命名
 * 3、消息的订阅与发布机制
*     1)先订阅，再发布（理解：有一种隔空对话的感觉）
 *    2)适用于任意组件间通信
 *    3)要在组件的componentWillUnmount中取消订阅
 * 4、fetch发送请求（关注分离的设计思想）
 *    try {
 *      const res = await fetch('url')
 *      const data = await res.json() // 解析成json格式
 *    } catch (error) {
 *      console.log('请求出错', error)
 *    } 
 */
export default class extends Component {
  // 兄弟传值：摒弃props，改用发布订阅的方式
  // state = {
  //   users: [],
  //   isFirst: true, // 是否是第一次打开页面
  //   isLoading: false, // 是否正在加载中
  //   err: null, // 存储请求相关的错误信息
  // }

  // updateAppState = (stateObj) => {
  //   this.setState(stateObj)
  // }

  render() {
    // const {users, isFirst, isLoading, err} = this.state
    return (
      <div>
        <div className="container">
          {/* <Search updateAppState={this.updateAppState}/>
          <List users={users} isFirst={isFirst} isLoading={isLoading} err={err} /> */}
          <Search/>
          <List/>
        </div>
      </div>
    )
  }
}
